<template>
    <div class="simulated-plan">
        <a-modal width="1100px" :visible="visible" title="模拟计算" @cancel="closeModal" class="yuan-modal simulated-plan-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="top-panel">
                        <div class="top-title">当归配方颗粒缺料数量：</div>

                        <div class="top-inputlist" >
                            <span>大袋：</span>
                            <a-input suffix="袋" class="yuan-form-input" v-model="formData.bigNum" placeholder="请输入"
                                @input="proNumChange"></a-input>
                        </div>
                        <div class="top-inputlist" >
                            <span>小袋：</span>
                            <a-input suffix="袋" class="yuan-form-input" v-model="formData.smallNum" placeholder="请输入"
                                @input="proNumChange"></a-input>
                        </div>

                    </div>
                    <div class="form-panel" v-for="item in planSimulation" :key="item.planName">
                        <div class="form-panel-title yuan-title">{{item.planName}}</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="计划投料">
                                <a-input suffix="kg" class="yuan-form-input" v-model="item.xuqiu" placeholder="请输入"
                                    @input="inNumChange(item)"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="可用批次库存">
                                <span class="yuan-form-show" style="width:100%;max-width:unset">
                                    
                                    <NumberAnimation class="font-bignum c-primary" :num="item.surplus" />
                                    <span v-if="item.enoughFlag" class="c-success">（可以满足）</span>
                                    <span v-else class="c-danger">（无法满足）</span>
                                    <span style="margin-left:10px">差量：</span>
                                    
                                    <span class="font-bignum c-danger" v-if="item.inNum>0">-
                                        <NumberAnimation  :num="item.inNum"/>
                                    </span>
                                    <span v-else>0</span>
                                </span>
                            </a-form-model-item>
                        </div>
                    </div>
                    <!-- <div class="form-panel">
                        <div class="form-panel-title">饮片计划(000002)</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="计划投料">
                                <a-select class="yuan-form-input" v-model="formData.plan2" placeholder="请选择">
                                    <a-select-option value="1">200</a-select-option>
                                    <a-select-option value="2">400</a-select-option>
                                    <a-select-option value="2">600</a-select-option>
                                </a-select>
                                <span class="yuan-form-unit">kg</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="可用批次库存">
                                <span class="yuan-form-show">500（可以满足）/200无法满足</span>
                            </a-form-model-item>
                        </div>
                    </div> -->
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <!-- <a-button @click="modalOk" type="primary" :loading="saveLoading">
                    生成计划
                </a-button> -->
                <a-button @click="resetForm">
                    重置
                </a-button>
                <a-button @click="closeModal">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import warningApi from "@/api/warningApi";
import { toDecimalNoZero } from "@/utils";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
@Component({
    name: "Add",
})
export default class extends Vue {
    @Prop({ default: {} }) parentInfo!: any;
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) bigProNum!: string;
    @Prop({ default: "" }) smallProNum!: string;
    @Prop({ default: "" }) spec!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.resetForm();
        }
    }
    formLoading = false;
    saveLoading = false;
    rules = {
        varietyName: [{ required: true, message: "请输入品种名称", trigger: "blur" }],
    };
    formData: any = {
        bigNum: "",
        smallNum: "",
    };
    resetForm() {
        this.formData = {
            bigNum: this.bigProNum,
            smallNum: this.smallProNum,
        };
        this.getPlanSimulation();
    }
    async mounted() {
        //this.resetForm();
    }
    closeModal() {
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                try {
                    this.saveLoading = true;
                    this.$emit("simulatedSave", { planSimulation: this.planSimulation, formData: this.formData });
                    this.closeModal();
                } finally {
                    this.saveLoading = false;
                }
            }
        });
    }
    planSimulation = [];
    async getPlanSimulation() {
        try {
            this.formLoading = true;
            const res = await warningApi.alarmSimulation({
                smallNum: this.formData.smallNum || 0,
                bigNum: this.formData.bigNum || 0,
                id: this.parentInfo.id,
            });
            this.planSimulation = res.data.map((item) => {
                const xuqiu = Number(item.num);
                const surplus = Number(item.surplus);
                const inNum = xuqiu > surplus ? xuqiu - surplus : 0;
                return {
                    ...item,
                    xuqiu: toDecimalNoZero(xuqiu),
                    surplus: toDecimalNoZero(surplus),
                    inNum: toDecimalNoZero(inNum),
                };
            });
        } finally {
            this.formLoading = false;
        }
    }
    simulationTimer: number | null = null;
    proNumChange() {
        // 加个防抖
        if (this.simulationTimer) {
            clearTimeout(this.simulationTimer);
        }
        this.simulationTimer = setTimeout(async () => {
            this.getPlanSimulation();
        }, 500);
    }
    inNumChange(item) {
        // 加个防抖
        if (this.simulationTimer) {
            clearTimeout(this.simulationTimer);
        }
        this.simulationTimer = setTimeout(async () => {
            this.reviewPlan(item);
        }, 500);
    }

    async reviewPlan(item) {
        try {
            this.formLoading = true;

            if (item.planName === "包装计划") {
                const res = await warningApi.getKeLiFeeding({
                    id: item.materialId,
                    num: item.xuqiu || 0,
                });
                this.planSimulation = res.data.map((item) => {
                    const xuqiu = Number(item.num);
                    const surplus = Number(item.surplus);
                    const inNum = xuqiu > surplus ? xuqiu - surplus : 0;
                    return {
                        ...item,
                        xuqiu: toDecimalNoZero(xuqiu),
                        surplus: toDecimalNoZero(surplus),
                        inNum: toDecimalNoZero(inNum),
                    };
                });
            } else if (item.planName === "制剂计划") {
                const res = await warningApi.getJGFeeding({
                    id: item.materialId,
                    num: item.xuqiu || 0,
                });

                const planSimulation = res.data.map((item) => {
                    const xuqiu = Number(item.num);
                    const surplus = Number(item.surplus);
                    const inNum = xuqiu > surplus ? xuqiu - surplus : 0;
                    return {
                        ...item,
                        xuqiu: toDecimalNoZero(xuqiu),
                        surplus: toDecimalNoZero(surplus),
                        inNum: toDecimalNoZero(inNum),
                    };
                });
                this.planSimulation = this.planSimulation.slice(0, 1).concat(planSimulation);
            } else if (item.planName === "提取计划") {
                const res = await warningApi.getTQFeeding({
                    id: item.materialId,
                    num: item.xuqiu || 0,
                });

                const planSimulation = res.data.map((item) => {
                    const xuqiu = Number(item.num);
                    const surplus = Number(item.surplus);
                    const inNum = xuqiu > surplus ? xuqiu - surplus : 0;
                    return {
                        ...item,
                        xuqiu: toDecimalNoZero(xuqiu),
                        surplus: toDecimalNoZero(surplus),
                        inNum: toDecimalNoZero(inNum),
                    };
                });
                this.planSimulation = this.planSimulation.slice(0, 2).concat(planSimulation);
            }
        } finally {
            this.formLoading = false;
        }
    }
}
</script>
<style lang="scss">
.simulated-plan-modal {
    .top-panel {
        margin-bottom: 15px;
    }
    .top-title {
        font-size: 18px;
        font-weight: bold;
    }
    .top-inputlist {
        display: inline-block;
        margin-right: 50px;
        margin-top: 10px;
    }
}
</style>
